Events Diary Tutorial

Overview

This tutorial builds a simple events diary web app that stores an event comprising an image, date, category, and description in a data object. No JavaScript code is needed; the web app pages are built by dragging and dropping controls from the Control toolbox. The control properties are configured to provide functionality, and to customise the look of the two web app pages.

The Home page displays the entries in a Grid with a thumbnail of each image—

Note | You could use a Data List control instead of, or in addition to the Grid; when a Data List displays a column from a data object containing an image, it displays a link to download the image—rather than a thumbnail. See also Data List Control and Grid versus Data List Control.

Entries are managed in the linked Manage page where you add and delete items—

Steps

In this tutorial you will—

• Understand how the application works.
• Create a data object to hold the application data.
• Create a new web application and add a Home page and a Manage page.
• Add controls to the Home page to provide functionality.
• Add controls to the Manage page to provide functionality and style the user interface.

How it works

Home page

The Home page features a Grid control bound to a data object. When the page loads, the grid retrieves and displays the specified columns from the data object for each record.

• The New Record button redirects the browser to the Manage page.
• When you click an item in the grid, the browser is redirected to the Manage page. The data object SystemId of the selected item is passed to the page, and the image, date, category, and description controls load and display details of the item that was clicked in the Home page.
  
  

Manage page

The Manage page is bound to the data object by the Layout > Data property. The following controls on the page are each bound to a particular column (field) in the data object. They are used to enter data for a new item, or, when redirected from the Home page, to display details of the selected item.

• A Combo box providing a drop-down list of the various item categories.
• A Date Picker handles the item date.
• A Text Box handles the item details
• An Image Panel handles the item image.

The Button controls operate as follows—

Clear Details: A button type Clear; clears any data values from the controls to prepare for a new record entry.

Save: A button type Save; saves the values of the controls in a new data object record and redirects to the Home page.

Home: A button type Link; redirects to the Home page.

Delete: A button type Delete; deletes the record displayed in the Manage page from the data object using the SystemId.